<template>
  <view class="contract uni-flex-column">
    <CustomNavBar class="navbar" title="实名认证">
      <template v-slot:left>
        <view class="back uni-flex uni-align-center uni-justify-center" @click="goBack">
          <uni-icons type="left" size="20"></uni-icons>
        </view>
      </template>
    </CustomNavBar>
    <view class="box_1 uni-flex-item">
      <view class="uni-flex uni-justify-between uni-align-center">
        <view class="text-group">
          <view class="text_1">实名认证</view>
          <view class="text_2">更加真实，更受欢迎</view>
        </view>
        <image :src="`${$ImgBaseUrl}safe.png`" class="safe" />
      </view>
      <view class="input-group">
        <view class="input-item">
          <view class="input-label">
            姓名
          </view>
          <view class="input-con">{{ name?name:'请上传身份证' }}</view>
          <!-- <input
            v-model="name"
            placeholder="输入真实姓名"
            type="number"
            @change="onPhoneInput"
            class="custom-input"
          /> -->
        </view>
        <view class="input-item">
          <view class="input-label">
            身份证号
          </view>
          <view class="input-con">{{ idcard?idcard:'请上传身份证' }}</view>
          <!-- <input
            class="custom-input"
            placeholder="输入身份证号"
            v-model="idcard"
            type="number"
            @change="onCodeInput"
          /> -->
        </view>
      </view>
      <view class="idcard-group uni-flex uni-flex-column">
        <view class="idcard behind" @click="handleAddPicture(0)">
          <image :src="idcardfront?idcardfront:`${$ImgBaseUrl}idcardfront.png`" class="idcardbehind" />
          <view class="upload_box" v-if="!idcardfront">
            <image :src="`${$ImgBaseUrl}shoot.png`" class="upload" />
            <view class="upload_text">身份证正面</view>
          </view>
        </view>
       
        <view class="idcard front" @click="handleAddPicture(1)">
          <image :src="idcardbehind?idcardbehind:`${$ImgBaseUrl}idcardbehind.png`" class="idcardbehind" />
          <view class="upload_box" v-if="!idcardbehind">
            <image :src="`${$ImgBaseUrl}shoot.png`" class="upload" />
            <view class="upload_text">身份证反面</view>
          </view>
        </view>
      </view>

      <view class="btn">
        <text class="text_4" @click="openFace">开始认证</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import CustomNavBar from "@/components/custom-navbar/index.vue";
import {uploadIdcardFileback, uploadIdcardFilefront, realNameAuth} from '@/api/user.js'
import { uploadImage } from '@/utils/upload.js';
import { reactive, toRefs, onMounted } from 'vue';
const state = reactive({
  name: '',
  idcard: '',
  idcardbehind: '',
  idcardfront: '',
  address: '',
});
const { name, idcard, idcardbehind, idcardfront,address } = toRefs(state);
const openFace = () => {
  uni.navigateTo({
    url: "/pages/personalCenter/authentication/faceAuthentication"
  });
  // if(!name.value || !idcard.value) {
  //   uni.showToast({
  //     icon: 'none',
  //     title: '请上传身份证正面照片'
  //   })
  // }else if(!idcardbehind.value){
  //   uni.showToast({
  //     icon: 'none',
  //     title: '请上传身份证反面照片'
  //   })
  // }else{
  //   realNameAuth({
  //     fullName: name.value,
  //     idCard: idcard.value,
  //     address: address.value,
  //     cardType: 'ID_CARD',
  //   }).then(res => {
  //     if(res.code === 200) {
  //       uni.showToast({
  //         icon: 'none',
  //         title: '认证成功！'
  //       })
  //       uni.setStorageSync('realName', JSON.stringify({ name: name.value, idcard: idcard.value, idcardbehind: idcardbehind.value, idcardfront: idcardfront.value }));
  //       uni.navigateTo({
  //         url: "/pages/personalCenter/authentication/faceAuthentication"
  //       });
  //     } else {
  //       uni.showToast({
  //         icon: 'none',
  //         title: res.msg
  //       })
  //     }
  //   });
  // }
};

const handleAddPicture = (type) => {
  console.log(type)
  uni.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sizeType: ['compressed'],
    success: res => {
      console.log(res);
      uni.showLoading({
        title: "上传文件中...",
        mask: true
      })

      // 调用上传方法
      uploadImage(type?uploadIdcardFileback:uploadIdcardFilefront, res.tempFiles[0].tempFilePath, type?'back':'front',{}, {
        'Content-Type': 'multipart/form-data'
      }).then((response) => {
        // 保存为本地文件
        uni.saveFile({
          tempFilePath: res.tempFiles[0].tempFilePath,
          success: (saveRes) => {
            const savedFilePath = saveRes.savedFilePath;
            console.log('保存后的文件路径:', savedFilePath);
            // 保存后的文件路径可以在应用下次启动时使用
            if(type){
              idcardbehind.value = savedFilePath;
            } else {
              idcardfront.value = savedFilePath;
              name.value = response.name;
              idcard.value = response.idNum;
              address.value = response.address;
            }
          }
        });
        console.log('上传成功', response);
        uni.hideLoading();
      }).catch((error) => {
        uni.showToast({
          icon: 'none',
          title: error.errMsg||'上传失败',
          duration: 2000
        })
        console.error('上传失败', error);
        uni.hideLoading();
      });
    },
  });
}


onMounted(() => {
  
})

const goBack = () => {
  uni.navigateBack({
    delta: 1
  })
}
const change = () => {
  console.log(value.value)
}
</script>

<style scoped lang="scss">
.contract {
  height: 100vh;
  background: radial-gradient( 52% 101% at 16% 6%, #E2EFFF 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%);
  .navbar {
    width: 100%;
  }
  .back {
    width: 44rpx;
    height: 44rpx;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
  }
}
.box_1 {
  overflow-y: auto;
  padding: 56rpx 51rpx 66rpx 46rpx;
  .safe {
    width: 185rpx;
    height: 118rpx;
  }
  .text_1 {
    font-weight: 600;
    font-size: 60rpx;
    color: #0f3581;
    line-height: 84rpx;
  }
  .text_2 {
    font-weight: 400;
    font-size: 24rpx;
    color: #0f3581;
    line-height: 33rpx;
    margin-top: 10rpx;
  }
  .input-group {
    margin-top:56rpx;
    .input-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      height: 90rpx;
      background: #E4F0FF;
      box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E2E2E2;
      border-radius: 45rpx;
      padding: 26rpx 24rpx 24rpx 41rpx;
      margin-bottom: 44rpx;
    }
    .input-label {
      width: 138rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }
    .input-con{
      font-weight: 400;
      font-size: 30rpx;
      color: #999999;
      line-height: 42rpx;
    }
  }
  .idcard-group {
    width: 589rpx;
    margin: 0 auto;
    .idcard {
      position: relative;
      width: 589rpx;
      height: 340rpx;
      margin-bottom: 56rpx;
    }
  }
  .idcardbehind {
    width: 589rpx;
    height: 340rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
  .upload_box{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    .upload {
      width: 134rpx;
      height: 134rpx;
    }
    .upload_text{
      font-weight: 500;
      font-size: 30rpx;
      color: #2F80ED;
      line-height: 42rpx;
    }
  }
  .active {
    border: 2rpx solid #2f80ed;
  }
  .content {
    margin: 0 0 159rpx;
    padding-left: 44rpx;
    height: 294rpx;
    background: #ffffff;
    border-radius: 20rpx;
    position: relative;
    .text-group {
      width: 294rpx;
      margin: 0 17rpx 0 35rpx;
      .text_1 {
        font-weight: 600;
        font-size: 36rpx;
        color: #333333;
        line-height: 50rpx;
        margin-bottom: 24rpx;
      }
      .text_2 {
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        line-height: 40rpx;
      }
    }
    .image_icon1 {
      width: 250rpx;
      height: 363rpx;
      position: absolute;
      right: 22rpx;
      top: -71rpx;
    }
    .image_icon2 {
      width: 227rpx;
      height: 386rpx;
      position: absolute;
      right: 22rpx;
      top: -92rpx;
    }
  }
  .btn {
    width: 86%;
    height: 88rpx;
    background: #2f80ed;
    border-radius: 44rpx;
    text-align: center;
    font-weight: 600;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
  }
}
</style>